import React, { useState } from "react";
import {
  Input,
  InputGroup,
  Stack,
  InputLeftElement,
  Button,
  Flex,
  Text,
  FormLabel,
  Checkbox,
  Box
} from "@chakra-ui/react";
import { FaUserAlt, FaLock, FaWeibo, FaQq, FaWeixin } from "react-icons/fa";
import { useFormik } from 'formik'
import * as Yup from 'yup'
import axios from 'axios'
export default function SignIn() {
  const [showtroubles, setShowtroubles] = useState(false)
  const [singinable, setSinginable] = useState(true)
  function toggleShow(e) {
    console.log(e.target.id)
    console.log(showtroubles)
    if (e.target.id === "troubleBtn" && showtroubles === false) {
      console.log(true)
      setShowtroubles(() => {
        return true
      })
    } else {
      console.log(false)
      setShowtroubles(() => false)
    }
  }
  let troublelist
  if (showtroubles === true) {
    troublelist = (
      <Box
        display="block"
        position="absolute"
        top="40px"
        left="auto"
        right="0"
        minW="160px"
        borderRadius="4px"
        borderColor="transparent"
        boxShadow="0 2px 8px rgb(0 0 0 / 10%)"
        filter="drop-shadow(0 2px 8px rgba(0,0,0,.1))"
        overflow="hidden"
        px="0"
        py="5px"
        zIndex="1000"
        fontSize="14px"
        textAlign="left"
        bgColor="#fff"
        backgroundClip="padding-box"
      >
        <Stack spacing={1}>
          <Text
            px="20px"
            py="10px"
            fontWeight="400"
            display="block"
            lineHeight="1.42857"
            whiteSpace="nowrap"
            cursor="pointer"
          >用手机号重置密码</Text>
          <Text
            px="20px"
            py="10px"
            fontWeight="400"
            display="block"
            lineHeight="1.42857"
            whiteSpace="nowrap"
            cursor="pointer"
          >用邮箱重置密码</Text>
          <Text
            px="20px"
            py="10px"
            fontWeight="400"
            display="block"
            lineHeight="1.42857"
            whiteSpace="nowrap"
            cursor="pointer"
          >无法用海外手机号登录</Text>
          <Text
            px="20px"
            py="10px"
            fontWeight="400"
            display="block"
            lineHeight="1.42857"
            whiteSpace="nowrap"
            cursor="pointer"
          >无法用 Google 账号登录</Text>
        </Stack>

      </Box>
    )
  } else {
    troublelist = null
  }
  const formik = useFormik({
    initialValues: {
      email: "",
      password: ""
    },
    validateSchema: Yup.object({
      email: Yup.string()
        .required('请输入邮箱'),
      password: Yup.string()
        .required('请输入密码')
    }),
    onSubmit: values => {
      console.log(values)
      setSinginable(false)
      handleSubmit(values)
    }
  })
  async function handleSubmit(values) {
    const param = {
      user: values
    }
    try {
      const res = await axios.post('https://conduit.productionready.io/api/users/login', param)
      console.log(res)
      setSinginable(true)
      
    } catch (error) {
      for(var key in error.response.data.errors){
        alert(key+' '+error.response.data.errors[key][0])
      }
      setSinginable(true)

    }

  }
  return (
    <form onSubmit={formik.handleSubmit}>
      <Stack spacing="0">
        <InputGroup>
          <InputLeftElement
            h={50}
            pointerEvents="none"
            children={<FaUserAlt color="gray.400" />} />
          <Input
            h={50}
            bgColor="hsla(0,0%,71%,.1)"
            _focus={{ boxShadow: "none" }}
            borderRadius="md"
            borderBottomRightRadius={0}
            borderBottomLeftRadius={0}
            placeholder="邮箱"
            name="email"
            autoComplete="off"
            {...formik.getFieldProps('email')}
          />
        </InputGroup>
        <InputGroup>
          <InputLeftElement h={50} pointerEvents="none" children={<FaLock color="gray.400" />} />
          <Input
            bgColor="hsla(0,0%,71%,.1)"
            _focus={{ boxShadow: "none" }}
            h={50}
            borderRadius="md"
            borderTopLeftRadius={0}
            borderTopRightRadius={0}
            type="password"
            placeholder="密码"
            name="password"
            autoComplete="off"
            {...formik.getFieldProps('password')}
          />
        </InputGroup>

        <Flex position="relative"
          alignContent="center">
          <Checkbox
            id="remenberme"
            mr="2"
            size="sm"
            defaultIsChecked
          />
          <FormLabel htmlFor="remenberme" my="3">记住我</FormLabel>
          <Text
            my="3"
            ml="auto"
            id="troubleBtn"
            cursor="pointer"
            mr="0"
            position=""
            color="gray.400"
            fontSize={16}
            _hover={{ color: "gray.700" }}
            onClick={toggleShow}
          >登录遇到问题？</Text>
          {troublelist}

        </Flex>
        <Button
          bgColor="#3194d0"
          color="#fff"
          w="100%"
          py="9px"
          px="18px"
          borderRadius="25px"
          cursor="pointer"
          _hover={{ bgColor: "#187cb7" }}
          type="submit"
          isLoading={singinable===false}
          loadingText="Submitting"
        >
          登录
        </Button>
        <Flex
          alignContent="center"
          justifyContent="center"
          pt="50px"
        >
          <Text as="span"
            w="60px"
            height="1px"
            my="auto"
            borderTop="1px solid #b5b5b5"
          />
          <Text as="h6"
            mx="20px"
            fontSize="0.75rem"
            px="0"
            py="0.6rem"
            color="gray.400"
          >社交帐号登录</Text>
          <Text as="span"
            w="60px"
            height="1px"
            borderTop="1px solid #b5b5b5"
            my="auto"
          />
        </Flex>
        <Flex
          alignContent="center"
          justifyContent="center"
          flexBasis="50px"
        >
          <Text
            mx="5px"
            h="100%"
            w="50px"
            padding="11px"
          >
            <FaWeibo
              fontSize="28px"
              color="red" />
          </Text>

          <Text
            as="a"
            target="_blank"
            href="https://www.jianshu.com/users/auth/wechat"
            mx="5px"
            h="100%"
            w="50px"
            padding="11px"
          >
            <FaWeixin fontSize="28px" color="#00bb29" />
          </Text>
          <Text
            as="a"
            target="_blank"
            href="https://www.jianshu.com/users/auth/qq_connect"
            mx="5px"
            h="100%"
            w="50px"
            padding="11px"
          >
            <FaQq fontSize="28px" color="#498ad5" />
          </Text>


        </Flex>
      </Stack>
    </form>
  );
}
